<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信-自定义事件-子组件给父组件传递数据</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <!--1.自定义事件
        2.在子组件中用$emit触发事件，第一个参数是事件名，后边的参数要是传递的数据
        3.在自定义事件中用一个参数来接受-->
</head>
<div id="case13-demo6">
    <h3>你现在卡里余额是:{{total}}</h3>
    <child-component v-on:change1="handleTotal"></child-component>
</div>
<script type="text/javascript">
    var case13Demo6 = new Vue({
        el: "#case13-demo6",
        data: {
            total: 2000
        },
        methods: {
            handleTotal: function (value) {
                //此处的形参value就是传递过来的数据
                this.total = value
            }
        },
        components: {
            'child-component': {
                template: `
                <div>
                    <button v-on:click="handlecrease">+100</button>
                    <button v-on:click="handlereduce">-100</button>
                </div>`,
                data: function () {
                    return {
                        count:2000
                    }
                },
                methods: {
                    handlecrease:function () {
                        this.count=this.count+100
                        this.$emit('change1',this.count)//在子组件中用$emit触发事件，第一个参数是事件名，后边的参数要是传递的数据
                    },
                    handlereduce:function () {
                        this.count=this.count-100
                        this.$emit('change1',this.count)//在子组件中用$emit触发事件，第一个参数是事件名，后边的参数要是传递的数据
                    }
                }
            }
        }
    })
</script>
<body>
</body>
</html>